<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱华仕商品列表</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2987357_1i9pslcevkd.css">
    <link rel="stylesheet" href="../css/reset.css">

    <link rel="stylesheet" href="../css/list/list.css">
</head>

<body>
    <div class="oiwas_layout">
        <header>
            <div class="marquee">
                <div class="marqueeCon w">

                    <div class="mar_left">
                        <em class="iconfont icon-laba"></em>
                        <span>最新公告：</span>
                    </div>

                    <div id="scroll_div" class="fl">
                        <div id="scroll_begin">
                            注册得200元礼遇，先到先得！
                        </div>
                        <div id="scroll_end"></div>
                    </div>


                    <div class="mar_right">
                        <img src=""
                            alt="">
                    </div>


                </div>
            </div>
            <div class="main">
                <div class="nav w">
                    <h1>
                        <a href="">
                            <img src="	http://api.oiwas.com/upload/admin_upload/20210607/f7de14d1306faeac77ac89b339c47380.png"
                                alt="">
                            <span class="fans">粉丝数：36.8万</span>
                        </a>
                    </h1>

                    <div class="nav_right">
                        <div class="search">
                            <input type="text">
                            <em class="iconfont icon-fangdajing"></em>
                        </div>

                        <div class="nav_font">
                            <a href="">在线客服</a>
                            <a href="">查找店铺</a>
                            <a href="" class="user_regd">登录</a>
                            <a href="">
                                <em class="iconfont icon-gouwudai"></em>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column ">
                    <ul class="w nav_list">
                        <li>
                            <span>首页</span>

                        </li>

                        <li>
                            <span>拉杆箱</span>
                            <ul class="hover_nav_list">
                                <li>商场同款</li>
                                <li>休闲通勤</li>
                                <li>可乐联名</li>
                            </ul>
                        </li>

                        <li>
                            <span>史努比</span>
                        </li>

                        <li>
                            <span>双肩包</span>
                            <ul class="hover_nav_list">
                                <li>商务背包</li>
                                <li>休闲背包</li>
                                <li>可乐联名</li>
                                <li>KiM潮牌</li>
                            </ul>
                        </li>

                        <li>
                            <span>象象包</span>

                        </li>

                        <li>
                            <span>快乐象家庭</span>
                            <ul class="hover_nav_list">
                                <li>时尚妈咪包</li>
                                <li>Q萌童包</li>
                            </ul>
                        </li>

                        <li>
                            <span>新品专区</span>
                        </li>

                        <li>
                            <span>品牌故事</span>
                        </li>

                        <li>
                            <span>爱华仕大广赛</span>
                        </li>

                        <li>
                            <span>招商加盟</span>
                            <ul class="hover_nav_list">
                                <li>分销招商</li>
                                <li>礼品合作</li>
                                <li>百货加盟</li>
                                <li>售后服务</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="page">
            <div class="w">
                <div class="container">
                    <div class="current">
                        <em class="iconfont icon-shizhongfill"></em>
                        <a href="">首页</a>
                        <span class="gang">|</span>
                        <a href="">拉杆箱</a>
                        <span>/</span>
                        <a href="">同款</a>
                    </div>

                    <div class="listTit">[ 6&nbsp;件商品 ]</div>




                    <div class="articleList">
                        <div class="listAll">

                            <div class="articleMenu">

                                <div class="filterMain myFilter">
                                    <h2>
                                        您的选择
                                        <a href="">重置筛选</a>
                                    </h2>

                                    <div class="filterwrapper">
                                        <div class="selected">

                                        </div>
                                    </div>
                                </div>


                                <div class="filterMain">
                                    <h2>筛选条件</h2>

                                    <div class="filterwrapper">
                                        <div class="fsize">
                                            <div class="filterSize">
                                                尺寸
                                            </div>

                                            <ul class="filterList">
                                                <li>
                                                    <label for="">
                                                        <i class=""></i>
                                                        <span>24寸</span>
                                                    </label>
                                                </li>

                                                <li>
                                                    <label for="">
                                                        <i class=""></i>
                                                        <span>20寸</span>
                                                    </label>
                                                </li>

                                                <li>
                                                    <label for="">
                                                        <i class=""></i>
                                                        <span>28寸</span>
                                                    </label>
                                                </li>

                                                <li>
                                                    <label for="">
                                                        <i class=""></i>
                                                        <span>27寸</span>
                                                    </label>
                                                </li>

                                                <li>
                                                    <label for="">
                                                        <i class=""></i>
                                                        <span>26寸</span>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>


                                    <div class="price_select">
                                        <div class="filterName">
                                            价格选择
                                        </div>

                                        <!-- <div class="filterSrcoll">
                                            <span class="sLeft"></span>
                                            <span></span>
                                        </div> -->

                                    </div>
                                </div>



                            </div>

                            <div class="articleView">

                                <div class="artcleNav">
                                    <ul>
                                        <li class="idasc">
                                            综合

                                            <!-- 点击降序 点击升序 点击取消 -->
                                            <i class="">

                                            </i>
                                        </li>

                                        <li class="newasc">
                                            新品

                                            <!-- 点击降序 点击升序 点击取消 -->
                                            <i class="">

                                            </i>
                                        </li>

                                        <li class="saleasc">
                                            销量

                                            <!-- 点击降序 点击升序 点击取消 -->
                                            <i class="">

                                            </i>
                                        </li>

                                        <li class="priceasc">
                                            价格

                                            <!-- 点击降序 点击升序 点击取消 -->
                                            <i class="">

                                            </i>
                                        </li>
                                    </ul>


                                    <div class="artclePage">
                                        <span class="pageAll"></span>
                                        <div class="prev disabled"></div>
                                        <div class="next"></div>
                                    </div>
                                </div>


                                <div class="productGrid">
                                    <ul class="showlist">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">

            <div class="addren">
                <div class="w">
                    <ul>
                        <li>联系我们</li>
                        <li>热线电话：400-887-3868</li>
                        <li>总机：0752-7832299</li>
                        <li>地址：广东省惠州市惠城区演达大道花边岭南花园1-3F</li>
                    </ul>
                </div>
            </div>

            <div class="fot_list">
                <div class="list_top w">
                    <ul class="nav">
                        <li>
                            <dl>
                                <dt>产品目录</dt>

                                <dd>拉杆箱</a></dd>
                                <dd>史努比</a></dd>
                                <dd>双肩包</a></dd>
                                <dd>象象包</a></dd>
                                <dd>快乐象家庭</a></dd>
                                <dd>新品专区</a></dd>
                                <dd>爱华仕大广赛</a></dd>
                                <dd>招商加盟</a></dd>
                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>招商加盟</dt>

                                <dd>分销招商</dd>
                                <dd>礼品合作</dd>
                                <dd>百货加盟</dd>
                                <dd>售后服务</dd>
                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>关于爱华仕</dt>
                                <dd>品牌故事</dd>
                                <dd>企业介绍</dd>
                                <dd>查找门店</dd>
                                <dd>意见反馈</dd>

                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>我的账号</dt>
                                <dd>订单列表</dd>
                                <dd>账户资料</dd>
                                <dd>我的购物车</dd>
                            </dl>
                        </li>



                        <li>
                            <dl>
                                <dt>友情链接</dt>
                                <dd>天猫爱华仕旗舰店</dd>
                                <dd>爱华仕京东自营旗舰店</dd>
                                <dd>爱华仕官方旗舰店</dd>
                                <dd>爱华仕女包京东旗舰店</dd>
                            </dl>
                        </li>
                    </ul>

                    <div class="contact">
                        <ul>
                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/0ab234e.jpg" alt="">
                                <p>微博自媒体</p>
                            </li>

                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/1da4f69.jpg" alt="">
                                <p>微信公众号</p>
                            </li>


                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/252623a.jpg" alt="">
                                <p>微信小程序</p>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="list_btm">
                    <div class="w">

                        <div class="second_five">
                            <em class="iconfont icon-zhongguo"></em>
                            <span class="zh">
                                中国
                            </span>

                            <ul>
                                <li>隐私声明</li>
                                <li>|</li>
                                <li>使用条款</li>
                                <li>|</li>
                                <li>网站地图</li>
                            </ul>

                        </div>

                        <a href="">
                            Copyright @ 2007-2017 OIWS.All rights reserved. 粤ICP备17107696号
                        </a>
                    </div>
                </div>
            </div>

            <a href="javascript:;" class="pos_a" id="goback">
                <em class="iconfont icon-shangyi"></em>
            </a>
        </div>
    </div>


    <script src="../js/jquery.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/api.js"></script>
    <script>

        // 轮播图
        const b = new Banner('.banner');
        b.autoPlay()
        b.init()

        // 返回顶部
        retrun_top()

        // 公告栏
        ScrollImgLeft();




        // 判断用户是否登录
        const user = localStorage.getItem('login_user');

        if (user) {
            $('.user_regd').html(user);
            $('.user_regd').attr('href', './myselef.html');

        }






























        // 做商品列表啦
        let kw = '';
        let hasSortType = '';
        let sortType = 'asc';
        let sortId = 'goods_id';


        let page = 1;
        // 每页显示的数据
        let showSize = 8;
        let pageTotal = 0;
        let type = '';
        let name = '';



        // 调用商品列表
        getAajxData()



        // 分类
        $('.hover_nav_list').on('click', function (e) {

            if (e.target.tagName === 'LI') {
                type = e.target.innerHTML;
                page = 1;
                sortType = 'asc';
                hasSortType = '';
                sortId = 'goods_id';
                console.log(page);
                getAajxData()
            }
        })







        // 上下翻页
        $('.prev').on('click', function () {

            if (!($(this).hasClass('disabled'))) {

                page = page - 1;

                getAajxData();

                if ($(this).next().hasClass('disabled')) {
                    $(this).next().removeClass('disabled')
                }

                if (page === 1) {
                    $(this).addClass('disabled');
                }
            }
        })


        $('.next').on('click', function () {

            if (!($(this).hasClass('disabled'))) {

                page = page + 1;
                getAajxData();

                if ($(this).prev().hasClass('disabled')) {
                    $(this).prev().removeClass('disabled')
                }

                if (page === pageTotal) {
                    $(this).addClass('disabled');
                }
            }
        })





        // 搜索
        $('.icon-fangdajing').on('click', function () {
            kw = $('.search input').val();

            console.log(kw);
            getAajxData();
        })








        // 有点bug  点了别的 再点选中的只能进降序 升序没有 再点默认 再点升序降序

        var count = 0
        // 价格排序
        $('.priceasc').on('click', function () {

            $('.artcleNav ul li').css('background-color', '#fff');
            $('.artcleNav ul li i').removeClass('desc asc');

            sortType = 'asc';
            hasSortType = '';


            if (count === 0) {

                hasSortType = 'goods_price';
                sortType = 'desc';
                getAajxData();

                $('.priceasc i').removeClass('asc')
                $('.priceasc i').addClass('desc')
                $('.priceasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 1) {

                hasSortType = 'goods_price';
                sortType = 'asc';
                getAajxData();

                $('.priceasc i').removeClass('desc')
                $('.priceasc i').addClass('asc')
                $('.priceasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 2) {

                hasSortType = 'goods_id';
                sortType = 'asc';
                getAajxData();

                $('.priceasc i').removeClass('asc');
                $('.priceasc').css('background-color', '#fff')
                count = 0;
                return;
            }

        })



        // 销量排序
        $('.saleasc').on('click', function () {

            $('.artcleNav ul li').css('background-color', '#fff');
            $('.artcleNav ul li i').removeClass('desc asc');

            sortType = 'asc';
            hasSortType = '';

            if (count === 0) {
                hasSortType = 'goods_sale';
                sortType = 'desc';
                getAajxData();

                $('.saleasc i').removeClass('asc')
                $('.saleasc i').addClass('desc')
                $('.saleasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 1) {
                hasSortType = 'goods_sale';
                sortType = 'asc';
                getAajxData();

                $('.saleasc i').removeClass('desc')
                $('.saleasc i').addClass('asc')
                $('.saleasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 2) {

                hasSortType = 'goods_id';
                sortType = 'asc';
                getAajxData();

                $('.saleasc i').removeClass('asc');
                $('.saleasc').css('background-color', '#fff')
                count = 0;
                return;
            }

        })




        // 新品排序
        $('.newasc').on('click', function () {

            $('.artcleNav ul li').css('background-color', '#fff');
            $('.artcleNav ul li i').removeClass('desc asc');

            sortType = 'asc';
            hasSortType = '';

            if (count === 0) {
                hasSortType = 'goods_des';
                sortType = 'desc';
                getAajxData();

                $('.newasc i').removeClass('asc')
                $('.newasc i').addClass('desc')
                $('.newasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 1) {
                hasSortType = 'goods_des';
                sortType = 'asc';
                getAajxData();

                $('.newasc i').removeClass('desc')
                $('.newasc i').addClass('asc')
                $('.newasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 2) {

                hasSortType = 'goods_id';
                sortType = 'asc';
                getAajxData();

                $('.newasc i').removeClass('asc');
                $('.newasc').css('background-color', '#fff')
                count = 0;
                return;
            }

        })



        // 综合排序
        $('.idasc').on('click', function () {

            $('.artcleNav ul li').css('background-color', '#fff');
            $('.artcleNav ul li i').removeClass('desc asc');

            sortType = 'asc';
            hasSortType = '';

            if (count === 0) {
                hasSortType = 'goods_id';
                sortType = 'desc';
                getAajxData();

                $('.idasc i').removeClass('asc')
                $('.idasc i').addClass('desc')
                $('.idasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 1) {
                hasSortType = 'goods_id';
                sortType = 'asc';
                getAajxData();

                $('.idasc i').removeClass('desc')
                $('.idasc i').addClass('asc')
                $('.idasc').css('background-color', 'rgba(255,109,109,.1)')

                count++
                return
            }

            if (count === 2) {

                hasSortType = 'goods_id';
                sortType = 'asc';
                getAajxData();

                $('.idasc i').removeClass('asc');
                $('.idasc').css('background-color', '#fff')
                count = 0;
                return;
            }

        })















        // 获取数据
        async function getAajxData() {

            const res = await oList({
                kw,
                sortType,
                page,
                showSize,
                type,
                name,
                sortId,
                hasSortType,
            });

            const { status, msg, data: list, pageAll } = res;


            if (status) {
                let str = '';
                list.forEach(v => {
                    str += `
                            <li data_id = "${v.id}">
                                <a href="./details.html?id=${v.id}" class="thumbnail">
                                    <img src="${v.img}" alt="">
                                    <div class="gootTitle">
                                        <strong>${v.title}</strong>
                                        <p>￥${v.price}</p>
                                    </div>
                                </a>
                            </li>
                            `
                })

                $('.showlist').html(str);


                pageTotal = Math.ceil(pageAll / showSize);

                if (pageTotal == 1) {
                    $('.next').addClass('disabled')
                }

                $('.pageAll').html(page + '/' + pageTotal);

            } else {
                alert(msg)
            }
        }

    </script>
</body>

</html>